<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text.html" charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/for.css">
    <style>
        #snackbar {
            visibility: hidden;
            min-width: 250px;
            background-color: yellow;
            color: #000;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            right: 30%;
            top: 30px;
            font-size: 17px;
            margin-right: 120px;
        }
        #snackbar.show {
            visibility: visible;
            -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }
        @-webkit-keyframes fadein {
            from {top: 0; opacity: 0;}
            to {top: 30px; opacity: 1;}
        }
        @keyframes fadein {
            from {top: 0; opacity: 0;}
            to {top: 30px; opacity: 1;}
        }
        @-webkit-keyframes fadeout {
            from {top: 30px; opacity: 1;}
            to {top: 0; opacity: 0;}
        }
        @keyframes fadeout {
            from {top: 30px; opacity: 1;}
            to {top: 0; opacity: 0;}
        }
    </style>
</head>
<body>
    <div class="forget">
        <form>
            <h2 align="center" style="color: #fff;">Восстановление пароля</h2>
            <h5 style="font-size: 14px; color: yellow">На Ваш email адрес будет отправлена ссылка, чтобы сбросить пароль.</h5>
            <input type="text" name="username" placeholder="Введите Ваш email">
            <br><br>
            <input type="button" value="Отправить" onclick="myFunction()"/><br
            /><br>
            <a href="logn.html" style="text-decoration: none;">Вернуться назад</a>
            <br><br>
            <div id="snackbar">Ссылка успешна отправлена на Вашу почту!</div>
            <script>
                function myFunction() {
                    var x = document.getElementById("snackbar");
                    x.className = "show";
                    setTimeout(function() {
                        x.className =
                            x.className.replace("show", "");
                    }, 3000);
                }
            </script>
        </form>
    </div>
</body>
</html>